import { useState, useEffect } from 'react';
import { getDeviceType, isMobile, isTablet, isDesktop, getViewportWidth, getViewportHeight, DeviceType } from '../utils/responsive';

/**
 * 响应式 Hook
 * 提供设备类型检测和响应式状态管理
 */
export function useResponsive() {
  const [deviceType, setDeviceType] = useState<DeviceType>('desktop');
  const [viewportWidth, setViewportWidth] = useState(1920);
  const [viewportHeight, setViewportHeight] = useState(1080);

  useEffect(() => {
    // 初始化状态
    const updateState = () => {
      setDeviceType(getDeviceType());
      setViewportWidth(getViewportWidth());
      setViewportHeight(getViewportHeight());
    };

    updateState();

    // 监听窗口大小变化
    const handleResize = () => {
      updateState();
    };

    window.addEventListener('resize', handleResize);
    
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return {
    deviceType,
    isMobile: isMobile(),
    isTablet: isTablet(),
    isDesktop: isDesktop(),
    viewportWidth,
    viewportHeight,
  };
}

/**
 * 断点检测 Hook
 * @param breakpoint 断点名称
 * @returns 是否匹配当前断点
 */
export function useBreakpoint(breakpoint: keyof typeof import('../utils/responsive').BREAKPOINTS) {
  const [matches, setMatches] = useState(false);

  useEffect(() => {
    const checkBreakpoint = () => {
      const width = window.innerWidth;
      const breakpoints = {
        xs: 375,
        sm: 640,
        md: 768,
        lg: 1024,
        xl: 1280,
        '2xl': 1536,
      };
      
      setMatches(width >= breakpoints[breakpoint]);
    };

    checkBreakpoint();
    window.addEventListener('resize', checkBreakpoint);
    
    return () => {
      window.removeEventListener('resize', checkBreakpoint);
    };
  }, [breakpoint]);

  return matches;
}

/**
 * 媒体查询 Hook
 * @param query 媒体查询字符串
 * @returns 是否匹配媒体查询
 */
export function useMediaQuery(query: string) {
  const [matches, setMatches] = useState(false);

  useEffect(() => {
    const mediaQuery = window.matchMedia(query);
    
    const updateMatch = () => {
      setMatches(mediaQuery.matches);
    };

    updateMatch();
    mediaQuery.addEventListener('change', updateMatch);
    
    return () => {
      mediaQuery.removeEventListener('change', updateMatch);
    };
  }, [query]);

  return matches;
}

/**
 * 常用断点 Hook
 */
export function useBreakpoints() {
  const xs = useBreakpoint('xs');
  const sm = useBreakpoint('sm');
  const md = useBreakpoint('md');
  const lg = useBreakpoint('lg');
  const xl = useBreakpoint('xl');
  const xxl = useBreakpoint('2xl');

  return {
    xs,
    sm,
    md,
    lg,
    xl,
    xxl,
  };
}

/**
 * 方向检测 Hook
 * @returns 当前屏幕方向
 */
export function useOrientation() {
  const [orientation, setOrientation] = useState<'portrait' | 'landscape'>('portrait');

  useEffect(() => {
    const checkOrientation = () => {
      setOrientation(window.innerWidth > window.innerHeight ? 'landscape' : 'portrait');
    };

    checkOrientation();
    window.addEventListener('resize', checkOrientation);
    
    return () => {
      window.removeEventListener('resize', checkOrientation);
    };
  }, []);

  return orientation;
}

/**
 * 滚动位置 Hook
 * @returns 当前滚动位置
 */
export function useScrollPosition() {
  const [scrollPosition, setScrollPosition] = useState({ x: 0, y: 0 });

  useEffect(() => {
    const updateScrollPosition = () => {
      setScrollPosition({
        x: window.pageXOffset,
        y: window.pageYOffset,
      });
    };

    updateScrollPosition();
    window.addEventListener('scroll', updateScrollPosition);
    
    return () => {
      window.removeEventListener('scroll', updateScrollPosition);
    };
  }, []);

  return scrollPosition;
} 